<template>
  <div>
    <v-list-group
      v-model="item.active"
      v-for="item in items"
      :key="item.title"
      :prepend-icon="item.action"
      no-action
    >

      <v-list-tile v-for="subItem in item.items" :key="subItem.title"
                   :to="item.path + subItem.path">
        <v-list-tile-content>
          <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
        </v-list-tile-content>
        <v-list-tile-action>
          <v-icon>{{ subItem.action }}</v-icon>
        </v-list-tile-action>
      </v-list-tile>

      <v-list-tile slot="activator">
        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>

    </v-list-group>
  </div>


</template>

<script>
  import menus from "../../menu";

  export default {
    name: "ui1",
    computed: {
      items() {
        return menus;
      }
    }
  }
</script>

<style scoped>

</style>
